import {Drawer,Card} from 'antd';
import React from "react"
import {connect} from "dva";
import styles from './Detail.less'


function mapStateToProps(state) {
  return {
    list: state.goods.list
  };
}

@connect(mapStateToProps)
class Detail extends React.Component{


  constructor(props)
  {
    super(props);
    this.state = {
      visible: false,
      data: {}
    }
  }

  componentDidMount(){
    this.props.onRef(this)
  }

  showDrawer = (id)=>{

    const { dispatch } = this.props;
    dispatch({
      type: 'goods/fetchDetail',
      payload:{
        id: id
      }
    }).then(()=>{

      const { list } = this.props;

      if(list.errno === 0){
        this.setState({
          data: list.data,
          visible: true,
        })
      }

    });

  };

  onClose = () => {
    this.setState({
      visible: false,
    });
  };

  render() {

    let content = "";
    if(this.state.visible){
      var spec = '';
      if(this.state.data.spec.length > 0){

        spec = this.state.data.spec.map((item)=>
          <li key={item.id}>
            <Card style={{ width: 300 }}>
              <p>规格：{item.sku}</p>
              <p>价格：{item.price}</p>
              <p>剩余库存：{item.stock_num}</p>
              <p>销售数量：{item.sale_num}</p>
              <p>商品图片：<img src={this.state.data.thumb} alt="" width={150}/></p>
            </Card>
          </li>
        )
      }
      content =
        <div>
          <p>商品名称：{this.state.data.name}</p>
          <p>商品图片：<img src={this.state.data.thumb} alt="" width={250}/></p>
          <p>剩余库存：{this.state.data.stock_num}</p>
          <p>销售数量：{this.state.data.sale_num}</p>
          <p>地区：{this.state.data.area}</p>
          <p>供货商：{this.state.data.supplier}</p>
          <p>商品规格：</p>
          <ul className={styles.card}>{spec}</ul>
        </div>
    }

    return (
      <div>
        <Drawer
          title="商品详情"
          placement="right"
          closable={false}
          onClose={this.onClose}
          visible={this.state.visible}
          width={750}
        >
          {content}
        </Drawer>
      </div>
    );
  }

}


export default Detail;
